<template>
  <div class="Personal-data pages-box">
    <div class="header flex-center">
      <i class="iconfont icon-dajiantou" @click="$router.go(-1)"></i>个人资料
    </div>
    <div class="section">
      <div class="content">
        <van-form @submit="onSubmit">
          <div class="module">
            <div class="title">基本资料</div>
            <van-field
                v-model="info.avatar"
                name="avatar"
                label="头像"
                input-align="right"
                right-icon="arrow"
                required
                :rules="[{ required: true, message: '请上传头像' }]"
            >
              <template #input>
                <div class="avatar">
                  <van-uploader
                      v-model="avatars"
                      :max-count="1"
                      :beforeRead="onRead1"
                      :before-delete="delImg1"
                      accept=".jpeg,.jpg,.png"
                  />
                  <!-- :after-read="onRead1" -->
                </div>
              </template>

            </van-field>
            <van-field
                v-model="info.userName"
                size="large"
                name="姓名"
                label="姓名"
                input-align="right"
                required
                :rules="[{ required: true, message: '请填写姓名' }]"
            />
            <van-field
                v-model="info.userPhone"
                size="large"
                name="电话号码"
                label="电话号码"
                :maxlength="11"
                input-align="right"
                required
                :rules="[
                    { required: true, message: '请填写电话号码' },
                    { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！'}
                    ]"
            />
            <van-field
                v-model="info.userPid"
                size="large"
                name="userPid"
                label="身份证号"
                :maxlength="18"
                input-align="right"
                required
                :rules="[
                  { required: true, message: '请填写身份证号' },
                  {validator, message: '身份证号码格式错误！'}
                  ]"
                @blur="idCardBlur()"
            />
            <van-field name="uploader"
                       required
                       :rules="[{ required: true, message: '请上传你的证件照' }]">
              <template #input>
                <div style="display: flex; flex-direction: column">
                  <div style="margin-bottom: 20px">证件照</div>
                  <van-uploader
                      v-model="idCardPic"
                      :max-count="1"
                      :beforeRead="onRead"
                      :before-delete="idImg"
                      accept=".jpeg,.jpg,.png"
                  />
                  <!-- :after-read="onRead" -->
                </div>
              </template>
            </van-field>
            <van-field
                v-model="info.age"
                :readonly="true"
                size="large"
                name="age"
                label="年龄"
                placeholder="输入身份证号自动识别"
                input-align="right"
            />
            <van-field
                v-model="sex"
                :readonly="true"
                clickable
                size="large"
                name="sex"
                label="性别"
                input-align="right"
                placeholder="输入身份证号自动识别"
            />
            <van-field
                v-model="info.hometown"
                :readonly="true"
                clickable
                size="large"
                name="hometown"
                label="籍贯"
                input-align="right"
                placeholder="输入身份证号自动识别"
            />
            <van-field
                v-model="info.day"
                :readonly="true"
                clickable
                size="large"
                name="info.birthday"
                label="出生年份"
                input-align="right"
                placeholder="输入身份证号自动识别"
            >
              <template #extra>
                <span style="line-height: 20px; margin-left: 10px">年</span>
              </template>
            </van-field>
            <van-field
                v-model="educational"
                readonly
                clickable
                size="large"
                name="educational"
                label="学历"
                placeholder="请选择"
                right-icon="arrow"
                input-align="right"
                required
                @click="
                showEducation = true;
                edu_type = 1;
              "
            />
            <van-field name="uploader" label="">
              <template #input>
                <div style="display: flex; flex-direction: column">
                  <div style="margin-bottom: 20px">学历照片</div>
                  <van-uploader
                      v-model="educationalPic"
                      :max-count="1"
                      :beforeRead="onRead2"
                      :before-delete="delImg2"
                      accept=".jpeg,.jpg,.png"
                  />
                  <!-- :after-read="onRead" -->
                </div>
              </template>
            </van-field>
            <van-field
                v-model="info.height"
                size="large"
                name="height"
                label="身高"
                placeholder="请输入身高"
                input-align="right"
                @blur="DefaultHeight()"
            >
              <template #extra>
                <span style="line-height: 20px; margin-left: 10px">cm</span>
              </template>
            </van-field>
            <van-field
                v-model="info.weight"
                type="number"
                size="large"
                name="weight"
                label="体重"
                placeholder="请输入体重"
                input-align="right"
            >
              <template #extra>
                <span style="line-height: 20px; margin-left: 10px">kg</span>
              </template>
            </van-field>
            <van-field
                v-model="ismarital"
                readonly
                clickable
                size="large"
                name="ismarital"
                label="婚姻状态"
                placeholder="请选择"
                right-icon="arrow"
                input-align="right"
                required
                :rules="[{ required: true, message: '请选择您的婚姻状态' }]"
                @click="
                showMarriage = true;
                marryType = 1;
              "
            />

            <van-field name="个人介绍" label="" required>
              <template #input>
                <div
                    class="intro"
                    style="display: flex; flex-direction: column; width: 100%"
                >
                  <div style="margin-bottom: 5px">个人介绍</div>
                  <van-field
                      v-model="info.introduce"
                      size="large"
                      rows="3"
                      autosize
                      border
                      name="introduce"
                      label=""
                      type="textarea"
                      :rules="[{ required: true, message: '请输入个人介绍' }]"
                  />
                </div>
              </template>
            </van-field>
            <van-field name="uploader"
                       label=""
                       required
                       :rules="[{ required: true, message: '请上传你的生活照' }]">
              <template #input>
                <div style="display: flex; flex-direction: column">
                  <div style="margin-bottom: 20px">生活照</div>
                  <van-uploader
                      v-model="lifePhotos"
                      :max-count="1"
                      :beforeRead="beforeRead"
                      :before-delete="delImg"
                      accept=".jpeg,.jpg,.png"
                  />
                  <!-- :after-read="onRead" -->
                </div>
              </template>
            </van-field>
            <div class="uploder">
              <div class="uploadava">
                <!-- <van-overlay :show="show" @click="$emit('update:showAta', false),show = false">
                  <div class="update-avatar">
                    <ul class="avatar-select-type" @click.stop>
                      <van-uploader :before-read="beforeRead" capture="camera">
                        <li class="select-type-photo upload-avator">拍摄</li>
                      </van-uploader>
                      <li class="update-avatar-line"></li>
                      <van-uploader :before-read="beforeRead">
                        <li class="select-type-album upload-avator">从手机相册选择</li>
                      </van-uploader>
                    </ul>
                    <p @click.stop="show = false,$emit('update:showAta', false)">取消</p>
                  </div>
                </van-overlay> -->
                <van-popup
                    duration="0"
                    v-model="showCropper"
                    position="top"
                    :style="{ height: '100%' }"
                >
                  <div class="cropper-container">
                    <van-loading v-show="loadingShow" size='50' color="#fff" vertical text-color='#fff'>上传中...</van-loading>
                    <vueCropper
                        ref="cropper"
                        :img="option.img"
                        :outputSize="option.outputSize"
                        :outputType="option.outputType"
                        :info="option.info"
                        :full="option.full"
                        :autoCropWidth="option.autoCropWidth"
                        :autoCropHeight="option.autoCropHeight"
                        :canMove="option.canMove"
                        :canMoveBox="option.canMoveBox"
                        :original="option.original"
                        :autoCrop="option.autoCrop"
                        :fixed="option.fixed"
                        :fixedNumber="option.fixedNumber"
                        :centerBox="option.centerBox"
                        :infoTrue="option.infoTrue"
                        :fixedBox="option.fixedBox"
                        :high="option.high"
                        :mode="option.mode"
                    />
                    <van-nav-bar
                        left-text="取消"
                        right-text="上传"
                        @click-left="onClickLeft"
                        @click-right="getCropBlob"
                    />
                  </div>
                </van-popup>
              </div>
            </div>
          </div>
          <div class="module">
            <div class="title">工作情况</div>
            <van-field
                v-model="info.workAddress"
                style="font-size: 14px;"
                size="large"
                name="workAddress"
                label="工作地点"
                placeholder="请选择所在地区"
                input-align="right"
                right-icon="arrow"
                @click="work"
            />
            <van-field
                v-model="info.quarters"
                size="large"
                name="quarters"
                label="职业"
                placeholder="请选择您的职业"
                input-align="right"
                right-icon="arrow"
                @click="categoryShow2 = true"
            />
            <van-field
                v-model="info.workUnit"
                size="large"
                name="workUnit"
                label="工作单位"
                placeholder="请输入工作单位"
                input-align="right"
            />
            <van-field
                v-model="info.yearAward"
                size="large"
                name="yearAward"
                label="年收入"
                placeholder="请输入"
                input-align="right"
            >
              <template #extra>
                <span style="line-height: 20px; margin-left: 10px">万</span>
              </template>
            </van-field>
          </div>
          <div class="module">
            <div class="title">择偶意向</div>
            <van-field
                size="large"
                label="出生年份"
                input-align="right"
            >
              <template #extra>
                <van-stepper :integer="true" v-model="info.ageStart" step="1" />至
                <van-stepper :integer="true" v-model="info.ageEnd" step="1" />
                <span style="line-height: 20px; margin-left: 10px">年</span>
              </template>
            </van-field>
            <van-field
                size="large"
                label="身高"
                input-align="right"
            >
              <template #extra>
                <van-stepper :integer="true" v-model="info.heightStart" step="1" />至
                <van-stepper :integer="true" v-model="info.heightEnd" step="1" />
                <span style="line-height: 20px; margin-left: 10px">cm</span>
              </template>
            </van-field>
            <van-field
                v-model="info.targetWeight"
                type="number"
                size="large"
                name="targetWeight"
                label="体重"
                placeholder="请输入体重"
                input-align="right"
            >
              <template #extra>
                <span style="line-height: 20px; margin-left: 10px">kg</span>
              </template>
            </van-field>
            <!-- <van-field
              v-model="education1"
              readonly
              clickable
              size="large"
              name="学历"
              label="学历"
              placeholder="请选择"
              right-icon="arrow"
              input-align="right"
              @click="showEducation = true;edu_type = 2;"
            /> -->
            <van-field
                v-model="info.targetAward"
                type="number"
                size="large"
                name="targetAward"
                label="年收入"
                placeholder="请输入"
                input-align="right"
            >
              <template #extra>
                <span style="line-height: 20px; margin-left: 10px">万</span>
              </template>
            </van-field>
              <van-field
                  v-model="learning"
                  readonly
                  clickable
                  label="学历"
                  size="large"
                  placeholder="请输入"
                  right-icon="arrow"
                  input-align="right"
                  @click="showPopup"
              >
              </van-field>
            <van-field
                v-model="study"
                readonly
                clickable
                label="职业"
                size="large"
                placeholder="请输入"
                right-icon="arrow"
                input-align="right"
                @click="showPopup2"
            >
            </van-field>
<!--            <van-cell is-link @click="showPopup2">职业</van-cell>-->
            <van-field
                v-model="targetIsmarital"
                readonly
                clickable
                size="large"
                name="targetIsmarital"
                label="婚姻状况"
                placeholder="请选择"
                right-icon="arrow"
                input-align="right"
                @click="
                showMarriage = true;
                marryType = 2;
              "
            />
          </div>
          <div style="margin: 30px 0 20px">
            <van-button
                round
                block
                color="linear-gradient(to right, #F95276, #FD7795)"
                native-type="submit"
            >保存</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
    <!-- 选择性别 -->
    <van-popup v-model="showSex" position="bottom">
      <van-picker
          show-toolbar
          value-key="name"
          :columns="sexList"
          @confirm="sexConfirm"
          @cancel="showSex = false"
      />
    </van-popup>
    <!-- 选择学历 -->
    <van-popup v-model="showEducation" position="bottom">
      <van-picker
          show-toolbar
          value-key="title"
          :columns="educationList"
          @confirm="educationConfirm"
          @cancel="showEducation = false"
      />
    </van-popup>
    <!-- 选择年龄 -->
    <van-popup v-model="chooseAge" position="bottom">
      <van-picker
          show-toolbar
          value-key="name"
          @confirm="AgeConfirm"
          @cancel="chooseAge = false"
      />
    </van-popup>
    <!-- 选择身高 -->
    <van-popup v-model="chooseHeight" position="bottom">
      <van-picker
          show-toolbar
          value-key="name"
          @confirm="heightConfirm"
          @cancel="chooseHeight = false"
      />
    </van-popup>
    <!-- 选择婚姻状况 -->
    <van-popup v-model="showMarriage" position="bottom">
      <van-picker
          show-toolbar
          value-key="name"
          :columns="marriageList"
          @confirm="marriageConfirm"
          @cancel="showMarriage = false"
      />
    </van-popup>
    <!--    选择行业类别-->
    <van-popup v-model="categoryShow2" position="bottom">
      <van-picker
          show-toolbar
          value-key="title"
          :columns="categoryList2"
          @confirm="industry"
          @cancel="categoryShow2 = false"
      />
    </van-popup>
    <van-popup v-model="show1" closeable close-icon="close" round position="bottom" :style="{ height: '30%' }">
      <div class="show-popup">
        <van-checkbox-group v-model="objectEducationCheck" direction="horizontal" ref="checkboxGroup">
          <van-checkbox v-for="(item,index) in objectEducationList" :key="index" :name="item.value">{{ item.title }}</van-checkbox>
        </van-checkbox-group>
        <div class="show1-button">
          <van-button color="linear-gradient(to right, #fc6b8a, #fd7593)" @click="checkAll" size="small">全选</van-button>
          <van-button color="linear-gradient(to right, #fc6b8a, #fd7593)" size="small" @click="preservation">保存</van-button>
          <van-button color="linear-gradient(to right, #fc6b8a, #fd7593)" @click="toggleAll" size="small">反选</van-button>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="show2" closeable close-icon="close" round position="bottom" :style="{ height: '30%' }">
      <div class="show-popup">
        <van-checkbox-group v-model="targetOccupationCheck" direction="horizontal" ref="checkboxTarget">
          <van-checkbox v-for="(item,index) in targetOccupationList" :key="index" :name="item.value">{{ item.title }}</van-checkbox>
        </van-checkbox-group>
        <div class="show1-button">
          <van-button color="linear-gradient(to right, #fc6b8a, #fd7593)" @click="checkAll2" size="small">全选</van-button>
          <van-button color="linear-gradient(to right, #fc6b8a, #fd7593)" size="small" @click="preservation2">保存</van-button>
          <van-button color="linear-gradient(to right, #fc6b8a, #fd7593)" @click="toggleAll2" size="small">反选</van-button>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="isDutyStation" round position="bottom">
      <van-cascader
          v-model="cascaderValue"
          title="请选择所在地区"
          placeholder="请选择"
          :options="options"
          @close="isDutyStation = false"
          @change="isDutyStationChange"
          :field-names="fieldNames"
          @finish="onFinish"
      />
    </van-popup>
  </div>
</template>
<script>
import { uploadImg, getPersonalInfo, editPersonalInfo } from "@/api/users";
import { getcategory } from "@/api/fellowship";
import { VueCropper } from 'vue-cropper'
import {getProvince} from "../api/users";
export default {
  components: {
    VueCropper
  },
  props: {
    showAta: {
      default: false,
      type: Boolean
    },
    avaUrl: {
      default: '',
      type: String
    }
  },
  data() {
    let headeid = (rule, value, cb)=>{
      let val=checkIdNumberValid(value)
      if(val===true){
        cb()
      }else {
        cb(new Error('身份证输入有误！'))
      }
    }
    return {
      isDutyStation:false,//  工作地点
      options: [],//  工作地点数据
      fieldNames: {
        text: 'name',
        value: 'id',
        children: 'items',
      },
      Indexes: null,
      Indexes2: null,
      Indexes3: null,
      fieldValue: '',
      cascaderValue: '',
      show: true, // 上传类型的弹窗
      show1:false,
      show2:false,
      imageFileName: '',
      showCropper: false, // 裁剪的弹窗
      option: {
        img: '',
        outputSize: 0.8,
        info: false, // 裁剪框的大小信息
        outputType: 'jpeg', // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 340 + 'px', // 默认生成截图框宽度
        autoCropHeight: 200 + 'px', // 默认生成截图框高度
        high: true, // 是否按照设备的dpr 输出等比例图片
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [340,200], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        mode: '100% auto' // 图片默认渲染方式
      },
      loadingShow: false, // 是否展示loading
      info: {
        userPhone: "",
        avatar: "",
        userName: "",
        userPid: "",
        sex: "",
        age: "",
        educational: 0,
        height: "",
        weight: "",
        ismarital: 0,
        introduce: "",
        lifePhotos: "",
        lifeIdPhoto: "",
        workAddress: "",
        quarters: "",
        workUnit: "",
        yearAward: "",
        heightStart: "",
        heightEnd: "",
        ageStart: null,
        ageEnd: null,
        targetAge: 0,
        targetHeight: 0,
        targetWeight: "",
        targetAward: "",
        targetIsmarital: 0,
        educationalPic: "",
        birthday : "", //出生年份
        day: "",
        idCardPic: "",
        taergetEducational: "",//对象学历
        targetQuarters: "",//对象职业
        hometown: "", // 籍贯
      },
      userPhone: "",  //手机号码
      taergetEducational: "",//对象学历
      targetQuarters: "",//对象职业
      objectEducationList:[],
      targetOccupationList:[],
      objectEducationCheck:[],
      targetOccupationCheck:[],
      avatars: [],
      educational: "",
      educationalPic: [],
      idCardPic: [],
      education1: "",
      sex: "",  //性别
      hometown: "", // 籍贯
      birthday : "", //出生年份
      lifePhotos: [],
      ismarital: "",
      targetIsmarital: "", //对象婚姻状态
      targetHeight: "",
      heightStart: "",
      heightEnd: "",
      ageStart: "",
      ageEnd: "",
      targetAge: "",
      uploader: [],
      idPhoto:[],
      lifeIdPhoto: [],
      edu_type: 1,
      marryType: 1,
      showSex: false,
      sexList: [
        { id: 0, name: "男" },
        { id: 1, name: "女" },
      ],
      showEducation: false,
      chooseHeight: false,
      chooseAge: false,
      educationList: [],
      showMarriage: false,
      marriageList: [
        { id: 0, name: "无婚史" },
        { id: 1, name: "离异或丧偶且无孩" },
        { id: 2, name: "离异或丧偶且有孩" },
      ],
      showPost: false,
      postList: [],
      imgInfo: {},
      ceShi:{
        level: 1,
        pageNo: 1,
        pageSize:100,
        parentId: null
      },
      educationTitle:{0: "其他",1:"初中及以下",2:"高中",3:"大专",4:"本科",5:"硕士",6:"博士"},
      learning: "",
      occupationTitle:[],
      study: "",
      place:{ 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外" },
      categoryList2: [],
      categoryShow2: false,
    };
  },
  async created() {
    if (!localStorage.getItem("jyToken")) {
      return this.$router.replace({
        name: "Login",
        query: { dirUrlName: "PersonalData" },
      });
    }
    this.zhiYe()
    await this.getEducationList();
    this.getInfo();
    this.industryCategory()
  },
  methods: {
    DefaultHeight(){
      this.info.heightStart = this.info.height
      this.info.heightEnd = this.info.height
    },
    work(){
      this.isDutyStation = true
      this.dutyStation()
    },
    onFinish({ selectedOptions }) {
    },
    // 级联查询查询地区信息
    dutyStation(){
      this.ceShi.level = 1
      this.ceShi.parentId = null
      getProvince(this.ceShi).then(res=>{
        this.options = res.data
      })
    },
    isDutyStationChange(selectedOptions){
      if(selectedOptions.tabIndex === 0){
        setTimeout(() => {
          this.ceShi.level = 2
          this.ceShi.parentId = selectedOptions.value
          getProvince(this.ceShi).then(res=>{
            this.Indexes = this.options.indexOf(selectedOptions.selectedOptions[selectedOptions.selectedOptions.length - 1])
            this.$set(this.options[this.Indexes],'items',res.data)
          })
        }, 100);
      }else if(selectedOptions.tabIndex === 1){
        this.ceShi.level = 3
        this.ceShi.parentId = selectedOptions.value
        getProvince(this.ceShi).then(res=>{
          this.Indexes2 = this.options[this.Indexes].items.indexOf(selectedOptions.selectedOptions[selectedOptions.selectedOptions.length - 1])
          this.$set(this.options[this.Indexes].items[this.Indexes2],'items',res.data)
        })
      } else if(selectedOptions.tabIndex === 2){
        this.ceShi.level = 4
        this.ceShi.parentId = selectedOptions.value
        getProvince(this.ceShi).then(res=>{
          this.Indexes3 = this.options[this.Indexes].items[this.Indexes2].items.indexOf(selectedOptions.selectedOptions[selectedOptions.selectedOptions.length - 1])
          this.$set(this.options[this.Indexes].items[this.Indexes2].items[this.Indexes3],'items',res.data)
        })
      } else if(selectedOptions.tabIndex === 3){
        this.isDutyStation = false
        this.info.workAddress = selectedOptions.selectedOptions[selectedOptions.selectedOptions.length - 1].wholeName
      }
    },
    // 判断身份证是否正确
    validator (val) {
      const card15 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$/
      const card18 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      return card15.test(val) || card18.test(val)
    },
    beforeRead (file) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.$toast('请上传 jpg/png 格式图片')
        return false
      }
      this.showCropper = true
      this.imageToBase64(file)
      this.imageFileName = file.name
    },
    imageToBase64 (file) {
      if (file.type.indexOf('image/') === -1) {
        this.$toast('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。')
      } else {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          this.option.img = reader.result
        }
      }
    },
    getCropBlob () {
      this.$refs.cropper.getCropBlob(data => {
        let _this = this
        let typeArr = data.type.split('/')
        let files = new window.File([data], Date.parse(new Date()) + '.' + typeArr[1], { type: data.type })
        let params = new FormData();
        params.append("file", files);
        uploadImg(params).then((res) => {
          if (res.code === 0) {
            let url = this.ImgDomin(res.data.url);
            this.info.lifePhotos = url;
            this.lifePhotos = [{url}];
            this.$toast("上传成功");
            this.showCropper = false
          } else {
            this.$toast(res.msg);
          }
        });
      })
    },
    onClickLeft () {
      this.loadingShow = false
      this.showCropper = false
      this.$parent.showPhotoUploader = false
    },
    // 学历 Popup 弹出层
    showPopup(){
      this.show1=true
      getcategory("xlxz").then((res) => {
        if (res.code === 0) {
          this.objectEducationList = res.data
        }
      })
    },
    // 职业 Popup 弹出层
    showPopup2(){
      this.show2=true
    },
    zhiYe(){
      getcategory("zylb").then((res) => {
        if (res.code === 0) {
          this.targetOccupationList = res.data
          let b = []
          this.targetOccupationList.forEach(item=>{
            b.push(item.title)
          })
          this.occupationTitle = {...b}
        }
      });
    },
    // 学历全选
    checkAll() {
      this.$refs.checkboxGroup.toggleAll(true);
    },
    // 学历保存
    preservation(){
      this.info.taergetEducational = this.objectEducationCheck.join()
      let a = []
      this.objectEducationCheck.forEach(item=>{
        a.push(this.educationTitle[parseInt(item.substr(0))])
      })
      this.learning = a.join()
      this.show1=false
    },
    // 学历反选
    toggleAll() {
      this.$refs.checkboxGroup.toggleAll();
    },
    // 职业全选
    checkAll2() {
      this.$refs.checkboxTarget.toggleAll(true);
    },
    // 职业保存
    preservation2(){
      this.info.targetQuarters = this.targetOccupationCheck.join()
      let c = []
      this.targetOccupationCheck.forEach(item=>{
        c.push(this.occupationTitle[parseInt(item.substr(0))])
      })
      this.study = c.join()
      this.show2=false
    },
    // 职业反选
    toggleAll2() {
      this.$refs.checkboxTarget.toggleAll();
    },
    // 由身份证号获取性别和年龄以及籍贯
    idCardBlur() {
      if (this.info.userPid) {
        let pid = this.info.userPid;
        // 性别
        if (parseInt(pid.substr(16, 1)) % 2 === 1) {
          this.sex = "男";
          this.info.sex = 1;
        } else {
          this.sex = "女";
          this.info.sex = 2;
        }
        // 年龄
        let myDate = new Date();
        let month = myDate.getMonth() + 1;
        let day = myDate.getDate();
        let age = myDate.getFullYear() - pid.substring(6, 10) - 1;
        if (
            pid.substring(10, 12) < month || (pid.substring(10, 12) === month && pid.substring(12, 14) <= day)
        ) {
          age++;
        }
        this.info.age = age;
        // 籍贯
        this.info.hometown = this.place[parseInt(pid.substr(0, 2))]
        //  出生年份
        this.info.birthday = pid.substring(6, 10)+"-"+pid.substring(10, 12)+"-"+pid.substring(12, 14);
        this.info.day = this.info.birthday.substring(0,4)
        this.info.ageStart = this.info.birthday.substring(0,4)
        this.info.ageEnd = this.info.birthday.substring(0,4)
      }
    },
    // 获取学历信息
    async getEducationList() {
      await getcategory("xlxz").then((res) => {
        if (res.code === 0) {
          this.educationList = res.data;
        }
      });
    },
    // 性别
    sexConfirm(value) {
      this.info.sex = value.id;
      this.sex = value.name;
      this.showSex = false;
    },
    // 学历
    educationConfirm(value) {
      this.info.educational = value.value;
      this.educational = value.title;
      this.showEducation = false;
    },
    // 年龄
    AgeConfirm(value){
      this.info.targetAge = value.id;
      this.targetAge = value.name;
      this.chooseAge = false;
    },
    // 身高
    heightConfirm(value){
      this.info.targetHeight = value.id;
      this.targetHeight = value.name;
      this.chooseHeight = false;
    },
    industry(value){
      this.info.quarters = value.title;
      this.categoryShow2 = false;
    },
    // 获取行业类别
    industryCategory() {
      getcategory('zylb').then((res) => {
        if (res.code === 0) {
          this.categoryList2 = res.data;
        }
      })
    },
    marriageConfirm(value) {
      if (this.marryType === 1) {
        this.info.ismarital = value.id;
        this.ismarital = value.name;
      } else {
        this.info.targetIsmarital = value.id;
        this.targetIsmarital = value.name;
      }
      this.showMarriage = false;
    },
    onRead1(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        return this.$toast("请上传jpg,jpeg,png格式的图片");
      }
      let params = new FormData();
      params.append("file", file);
      uploadImg(params).then((res) => {
        if (res.code === 0) {
          let url = this.ImgDomin(res.data.url);
          this.info.avatar = url;
          this.avatars = [{url}];
        } else {
          this.$toast(res.msg);
        }
      });
    },
    onRead2(file) {
      console.log(file);
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        return this.$toast("请上传jpg,jpeg,png格式的图片");
      }
      let params = new FormData();
      params.append("file", file);
      console.log(params);
      uploadImg(params).then((res) => {
        console.log(res);
        if (res.code === 0) {
          let url = this.ImgDomin(res.data.url);
          this.info.educationalPic = url;
          this.educationalPic = [{url}];
        } else {
          this.$toast(res.msg);
        }
      });
    },
    delImg2(file) {
      this.info.educationalPic = "";
      this.educationalPic = [];
    },
    delImg1(file) {
      this.info.avatar = "";
      this.avatars = [];
    },
    onRead(file) {
      if (file.type !== "image/jpeg" && file.type !== "image/png") {
        return this.$toast("请上传jpg,jpeg,png格式的图片");
      }
      let params = new FormData();
      params.append("file", file);
      uploadImg(params).then((res) => {
        if (res.code === 0) {
          let url = this.ImgDomin(res.data.url);
          this.info.idCardPic = url;
          this.idCardPic = [{url}];
          // let img = new Image()
          // img.src = url
          // const vm = this
          // img.onload = function () {
          //   vm.$set(vm.imgInfo, 'width', img.width)
          //   vm.$set(vm.imgInfo, 'height', img.height)
          //   console.log(vm.imgInfo) // 打印图片信息
          //   if(vm.imgInfo.width<vm.imgInfo.height){
          //     Toast.fail('高度不能大于宽度')
          //     vm.lifePhotos = []
          //   }
          // }
        } else {
          this.$toast(res.msg);
        }
      });
    },
    delImg(file) {
      this.info.lifePhotos = "";
      this.lifePhotos = [];
    },
    idImg(file) {
      this.info.idCardPic = "";
      this.idCardPic = [];
    },
    getInfo() {
      getPersonalInfo()
          .then((res) => {
            console.log(res,"获取个人资料");
            if (res.code === 0) {
              let info = res.data;
              let avatar = info.avatar
              if (avatar) {
                this.avatars = [{url:avatar}];
              }
              this.info.avatar = info.avatar || "";
              let educationalPic = info.educationalPic
              if (educationalPic) {
                this.educationalPic = [{url:educationalPic}];
              }
              this.info.educationalPic = info.educationalPic || "";
              let idCardPic = info.idCardPic
              if (idCardPic) {
                this.idCardPic = [{url:idCardPic}];
              }
              this.info.idCardPic = info.idCardPic || "";
              if(info.birthday === null) {
                this.info.day = null
              }else{
                this.info.day = info.birthday.substring(0,4) || "";
              }
              this.info.hometown = info.hometown || "";
              this.info.userPhone = info.userPhone || "";
              this.info.userName = info.userName || "";
              this.info.userPid = info.userPid || "";
              this.info.sex = info.sex;
              if (info.sex == 1) {
                this.sex = "男";
              } else if (info.sex == 2) {
                this.sex = "女";
              }
              this.info.age = info.age || "";
              this.info.educational = info.educational;
              let eduInfo = this.educationList.find(
                  (c) => c.value == info.educational
              );
              if (eduInfo) {
                this.educational = eduInfo.title;
              }
              this.info.height = info.height || "";
              this.info.weight = info.weight || "";
              this.info.ismarital = info.ismarital;
              this.ismarital = this.returnMarry(info.ismarital);
              this.info.introduce = info.introduce || "";
              this.info.lifePhotos = info.lifePhotos || "";
              let lifePhotos = info.lifePhotos
              if (lifePhotos) {
                this.lifePhotos = [{url:lifePhotos}]
              }
              this.info.workAddress = info.workAddress || "";
              this.info.quarters = info.quarters || "";
              this.info.workUnit = info.workUnit || "";
              this.info.yearAward = info.yearAward || "";
              this.info.ageStart = info.ageStart || "";
              this.info.ageEnd = info.ageEnd || "";
              this.info.heightStart = info.heightStart || "";
              this.info.heightEnd = info.heightEnd || "";
              this.info.targetHeight = info.targetHeight;
              this.info.targetWeight = info.targetWeight || "";
              this.info.targetAward = info.targetAward || "";
              this.info.targetIsmarital = info.targetIsmarital;
              this.targetIsmarital = this.returnMarry(info.targetIsmarital);
              if(info.taergetEducational === null || info.taergetEducational === ""){
                info.taergetEducational = null
              }else{
                this.info.taergetEducational = info.taergetEducational
                const str = this.info.taergetEducational
                this.objectEducationCheck = str.split(",");
                let a = []
                this.objectEducationCheck.forEach(item=>{
                  a.push(this.educationTitle[parseInt(item.substr(0))])
                })
                this.learning = a.join()
              }
              if(info.targetQuarters === null || info.targetQuarters === ""){
                this.info.targetQuarters = null
              }else{
                this.info.targetQuarters = info.targetQuarters
                const str2 = this.info.targetQuarters
                this.targetOccupationCheck = str2.split(",");
                let c = []
                this.targetOccupationCheck.forEach(item=>{
                  c.push(this.occupationTitle[parseInt(item.substr(0))])
                })
                this.study = c.join()
              }
            } else {
              this.$toast(res.msg);
            }
          })
          .catch((err) => {
            this.$toast("数据获取失败，请稍后重试！");
          });
    },
    returnMarry(type) {
      if (type == 0) {
        return "无婚史";
      } else if (type == 1) {
        return "离异或丧偶且无孩";
      } else if (type == 2) {
        return "离异或丧偶且有孩";
      }
    },
    onSubmit(values) {
      this.info.ageStart = this.info.ageStart+"-01-01"
      this.info.ageEnd = this.info.ageEnd+"-01-01"
      console.log(this.info, "this.info");
      console.log(values, "values");
      if(this.info.ageStart >= this.info.ageEnd){
        return this.$toast("最大年龄不能小于最小年龄");
      }
      if(this.info.heightStart >= this.info.heightEnd){
        return this.$toast("最大身高不能小于最小身高")
      }
      editPersonalInfo(this.info)
          .then((res) => {
            if (res.code === 0) {
              this.$toast(res.msg);
              setTimeout(() => {
                this.$router.replace({ name: "About" });
              }, 1000);
            } else {
              this.$toast(res.msg);
            }
          })
          .catch((err) => {
            this.$toast("保存失败，请稍后重试！");
          });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/css/personal-data.less");
/deep/.cropper-view-box{
  outline:2px dashed #fff !important
}
/deep/.crop-point{
  background-color: auto !important;
}
/deep/.van-loading{
  position: absolute;
  //  color: red;
  z-index: 9999;
  left: 50%;
  top: 50%;
  margin-left: -55px;
  margin-top: -30px;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px 30px;
  border-radius: 25px;
}
.change-photo-setter {
  width: 400px;
  background: #fff;
  position: absolute;
  top: 11%;
  left: 40px;
  z-index: 300;
  .sett-item{
    width: 100%;
  }
  /deep/.van-uploader__input-wrapper{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    img{
      width: 40px;
      height: 40px;
      display: block;
    }
  }
  .sett-item:first-child{
    border-bottom: 2px solid #ccc;
  }
}
.uploadava {
  .update-avatar {
    height: 100%;
    text-align: center;
    .update-avatar-line {
      width: 100%;
      height: 1px;
      background-color: #979797;
    }
    .avatar-select-type {
      background-color: #fff;
      width: 346px;
      border-radius: 12px;
      padding-bottom: 4px;
      .upload-avator {
        padding: 14px;
      }
    }
    p {
      margin: 15px 0 30px;
      background-color: #fff;
      border-radius: 12px;
      padding: 15px 0 18px;
    }
  }
  .cropper-container {
    height: 94vh;
    .van-nav-bar {
      background-color: rgba(0, 0, 0, 0.87);
      :global(.van-nav-bar__text) {
        color: #fff;
      }
      :global(.van-nav-bar__text:nth-child(2)){
        color: #000;
        font-weight: 500;
      }
    }
  }
  .vue-cropper {
    background: #000;
    height: 100%;
    padding-top: 46px;
    box-sizing: border-box;
  }
}
/deep/.van-stepper__minus, /deep/.van-stepper__plus {
  width: 20px !important;
  height: 20px !important;
}
/deep/.van-stepper__input {
  width: 32px;
  height: 23px;
}
.show-popup{
  margin-top: 40px;
  padding: 0 50px;
  .show1-button{
    margin-top: 10px;
    display: flex;
    border-radius: 30px;
    justify-content: space-around;
  }
}
/deep/.van-field__error-message{
  text-align: right;
}
.show-popup{
  .van-checkbox-group--horizontal{
    display: block;
    .van-checkbox--horizontal{
      padding: 10px 0;
      margin:0;
    }
    .van-checkbox--horizontal:hover{
      background-color: #f2f3f5;
    }
  }
}
</style>
